<template>
  <div>
    <form-item :formItems="formItems" @screenConfirm="screenConfirm"></form-item>
    <div class="card bg-w border-r">
      <!-- <div class="btns clear">
        <a-button type="primary" size="middle" class="fr">新建</a-button>
      </div> -->
      <a-config-provider :locale="zhCN">
        <ant-table :columns="columns" :data-source="tableData" :pagination="pagination">
          <template v-slot:bodyCell="{ scope }">
            <template v-if="scope.column.key === 'avatar'">
              <img :src="scope.record.avatar" class="row-avatar">
            </template>
            <template
              v-else-if="['fansNum', 'avgPlayNum', 'businessNum', 'playNum', 'praiseNum', 'videoNum'].some(item => item === scope.column.key)">
              <div class="form-txt">
                {{ numConvert(scope.record[scope.column.key], 2) }}
              </div>
            </template>
            <template v-else-if="scope.column.key === 'gender'">
              <div class="form-txt">
                {{ gender[scope.record.gender] }}
              </div>
            </template>
            <template v-else-if="scope.column.key === 'status'">
              <div class="form-txt">
                {{ scope.record.status === 1 ? '启用' : '禁用' }}
              </div>
            </template>
            <template v-else-if="scope.column.key === 'action'">
              <span style="width: 260px">
                <a-button type="link" @click="toEdit(scope.record)">编辑</a-button>
                <a-button type="link" @click="toEditStatus(scope.index)">
                  {{ scope.record.status === 1 ? '禁用' : '启用' }}
                </a-button>
              </span>
            </template>
            <template v-else>
              <div class="form-txt ellipsis">{{
                scope.record[scope.column.key]
              }}</div>
            </template>
          </template>
        </ant-table>
      </a-config-provider>
    </div>
  </div>

  <edit-info v-if="detail.show" :id="detail.id" @close="detail.show = false" @change="tableDataChange"></edit-info>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: "sensationAdmin"
});
</script>
<script setup>
import formItem from "@/components/form-item/index.vue";
import EditInfo from './components/editInfo.vue';
import zhCN from "ant-design-vue/es/locale/zh_CN";
import api from '@/api/index.js';
import numConvert from '@/utils/numConvert.js';
import { ref, onMounted } from 'vue';
import { message } from "ant-design-vue";

const gender = {
  female: '女',
  male: '男',
  unknown: '未知'
};

const formItems = ref([
  {
    label: "红人名称",
    key: "keyword",
    type: "input",
    value: "",
    placeholder: "请输入",
  }
]);
const columns = [
  {
    title: "头像",
    dataIndex: "avatar",
    key: "avatar",
  },
  {
    title: "名称",
    dataIndex: "name",
    key: "name",
  },
  {
    title: "性别",
    dataIndex: "gender",
    key: "gender",
  },
  {
    title: "所属平台",
    dataIndex: "source",
    key: "source",
  },
  {
    title: "国家",
    dataIndex: "country",
    key: "country",
  },
  {
    title: "邮箱",
    dataIndex: "email",
    key: "email",
  },
  {
    title: "粉丝量",
    dataIndex: "fansNum",
    key: "fansNum",
  },
  {
    title: "平均观看量",
    dataIndex: "avgPlayNum",
    key: "avgPlayNum",
  },
  {
    title: "平均互动率",
    dataIndex: "avgInteractRate",
    key: "avgInteractRate",
  },
  {
    title: "商业合作数",
    dataIndex: "businessNum",
    key: "businessNum",
  },
  {
    title: "播放量",
    dataIndex: "playNum",
    key: "playNum",
  },
  {
    title: "视频数",
    dataIndex: "videoNum",
    key: "videoNum",
  },
  {
    title: "点赞数",
    dataIndex: "praiseNum",
    key: "praiseNum",
  },
  {
    title: "状态",
    dataIndex: "status",
    key: "status",
  },
  {
    title: "操作",
    key: "action",
    fixed: 'right',
    width: 300,
    scopedSlots: { customRender: 'action' },
  },
];
const form = ref({
  page: 1,
  perPage: 10
});
const tableData = ref([]);
const pagination = ref({
  showSizeChanger: true,
  total: 0,
  showQuickJumper: true,
  current: 1,
  pageSize: 10,
  showTotal: detailTotal => `共 ${detailTotal} 条`,
  onChange: (current, pageSize) => {
    form.value.perPage = pageSize;
    pagination.value.current = current;
    pagination.value.pageSize = pageSize;
    queryInfluencerList(current);
  },
});
const detail = ref({});

// 获取条件
const querySelectScreenData = list => {
  list.forEach(item => {
    form.value[item.key] = item.value;
  });
};
// 点击确认条件筛选
const screenConfirm = e => {
  querySelectScreenData(e);
  queryInfluencerList(1);
};
// 
const queryInfluencerList = current => {
  form.value.page = current;
  api.sensation.queryInfluencerList(form.value).then(res => {
    pagination.value.total = res.page.total;
    tableData.value = res.list;
  });
}
const toEdit = item => {
  detail.value = {
    id: item.influencerId,
    show: true
  }
}
const tableDataChange = () => {
  detail.value.show = false;
  queryInfluencerList(form.value.page);
}
// 启用或禁用
const toEditStatus = index => {
  const item = tableData.value[index];
  api.user.updateUser({
    ...item,
    userId: item.id,
    status: item.status === 1 ? 2 : 1
  }).then(() => {
    tableData.value[index].status = item.status === 1 ? 2 : 1;
  }).catch(err => {
    message.error(err.msg);
  });
}

onMounted(() => {
  queryInfluencerList(1);
});
</script>

<style lang="less" scoped>
.card {
  padding: 20px 24px;

  .row-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }

  .btns {
    margin-bottom: 16px;

    &:hover {
      position: relative;
      z-index: 100;
    }

    .ant-btn {
      margin-left: 16px;
    }
  }
}
</style>